<!--调停课情况-->
<template>
  <div>
    <el-dialog title="调停课情况" :visible.sync="dialogVisible" :close-on-click-modal="false" width="90%">
      <div class="search-container">
        <div class="search-container-item right87">
          <div class="item-name">调停课类型：</div>
          <el-select v-model="typeValue" placeholder="请选择" style="width: 110px" size="mini" @change="changeValue">
            <el-option v-for="item in typeList" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
            <el-table-column prop="kcmcName" label="课程名称" align="center" min-width="150"></el-table-column>
            <el-table-column prop="skdx" label="授课对象" align="center" min-width="150"></el-table-column>
            <el-table-column label="调停课前" align="center">
                <el-table-column prop="riqi" label="日期" align="center" min-width="150"></el-table-column>
                <el-table-column prop="zhouci" label="周次" align="center" min-width="150"></el-table-column>
                <el-table-column prop="xingqi" label="星期" align="center" min-width="150"></el-table-column>
                <el-table-column prop="jieci" label="节次" align="center" min-width="150"></el-table-column>
                <el-table-column prop="skddName" label="上课地点" align="center"  min-width="150"></el-table-column>
                <el-table-column prop="skjyName" label="授课教员" align="center" min-width="150"></el-table-column>
            </el-table-column>
            <el-table-column label="调停课后" align="center">
                <el-table-column prop="tzhrq" label="日期" align="center" min-width="180">
                  <template slot-scope="scope">
                    <el-date-picker class="table-time time" v-model="scope.row.tzhrq" type="date" value-format="yyyy-MM-dd" @change= "changeValue"></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column prop="tzhzc" label="周次" align="center" min-width="150">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.tzhzc">
                      <el-option v-for="i in zhouciList" :key="i.zhouci" :label="i.zhouci" :value="i.zhouci"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="classCantGraduationCount" label="星期" align="center" min-width="150">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.tzhxq">
                      <el-option label="周一" value="周一"></el-option>
                      <el-option label="周二" value="周二"></el-option>
                      <el-option label="周三" value="周三"></el-option>
                      <el-option label="周四" value="周四"></el-option>
                      <el-option label="周五" value="周五"></el-option>
                      <el-option label="周六" value="周六"></el-option>
                      <el-option label="周日" value="周日"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="classCantGraduationCount" label="节次" align="center" min-width="220">
                  <template slot-scope="scope">
                    <el-select class="width90" v-model="scope.row.tzhjc">
                       <el-option v-for="i in ttkqkInfo.jieciList" :key="i.displayName" :label="i.displayName" :value="i.displayName">{{i.displayName}}</el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="classCantGraduationCount" label="上课地点" align="center" min-width="150">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.tzhdd">
                      <el-option v-for="i in ttkqkInfo.skddList" :key="i.displayName" :label="i.displayName" :value="i.displayName">{{i.displayName}}</el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="classCantGraduationCount" label="授课教员" align="center" min-width="150">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.tzhjyName">
                      <el-option v-for="i in ttkqkInfo.skjyList" :key="i.displayName" :label="i.displayName" :value="i.displayName">{{i.displayName}}</el-option>
                    </el-select>
                  </template>
                </el-table-column>
            </el-table-column>
            <el-table-column prop="classCantGraduationCount" label="调停课原因说明" align="center" min-width="200">
              <template slot-scope="scope">
                <el-input type="textarea" :rows="2" v-model="scope.row.tzkyy"></el-input>
              </template>
            </el-table-column>
        </el-table>
        <div class="button-group" slot="footer">
          <div class="" @click="save">保存</div>
          <div class="" @click="dialogVisible = false">取消</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {dataTTSave} from "@/api/student";
export default {
  data() {
    return {
      dialogVisible:false, 
      typeList:[
        {label:'调课',value:'调课'},
        {label:'停课',value:'停课'}
      ],
      typeValue:'调课',
      tableData: [],
      xueqi:'',
      zhouciList:[],
    };
  },
  watch:{
    ttkqkInfo(val){
      let table = []
      if(val){
        table.push({
          kcmcName:val.kcmcName,
          skdx:val.skdx,
          riqi:val.riqi,
          zhouci:val.zhouci,
          xingqi:val.xingqi,
          jieci:val.jieci,
          xueqi:val.xueqi,
          skddName:val.skddName,
          skjyName:val.skjyName,
          tzhrq:'',//调整后日期
          tzhxq:'',//调整后星期
          tzhzc:'',//调整后周次
          tzkyy:'',//调停课原因
          tzhdd:'',//调整后地点
          tzhjyName:'',//调整后教员
          tzhjc:'',//调整后节次
        })
        this.tableData = table;
        this.xueqi = val.xueqi
      }
    }
  },
  props:{
    ttkqkInfo:{
      type:Object,
      default:()=>{}
    }
  },
  methods: {
    changeValue(e){
      this.initList(e)
    },
    //初始化表格
    async initList(e){
      let param = {
				riqi:e,
				xueqi:this.xueqi
			}
			this.commonApi.getWeeks(param).then(res=>{
				// let val = res.data.termRemarksList.filter(m=>m.isCurrent).length>0?res.data.termRemarksList.filter(m=>m.isCurrent)[0].zhouci:''
				// this.$set(this.tableData[0],'tzhzc',val)
        this.zhouciList = res.data
			})
    },

    async save(){
       let mes = this.tableData[0]
       let params = {
          tzhrq:mes.tzhrq,//调整后日期
          tzhxq:mes.tzhxq,//调整后星期
          tzhzc:mes.tzhzc,//调整后周次
          tzkyy:mes.tzkyy,//调停课原因
          tzhdd:mes.tzhdd,//调整后地点
          tzhjyName:mes.tzhjyName,//调整后教员
          tzhjc:mes.tzhjc,//调整后节次
          mediateType:this.typeValue
       }
      let res = await dataTTSave(params);
      if(res.code == 200){
        this.$message.success('保存成功！')
        this.dialogVisible = false
      }

    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
/deep/.el-table--border td,th{
  border: 1px solid rgb(199, 215, 235);
}
  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
/deep/.button-group{
  padding-bottom: 48px;
}
.search-container {
  justify-content: flex-start !important;
}
.table-time{width: 133px;}
.width90{width: 90px;}
</style>
